<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onRowSelectChange="selectChange"
      :onColumnsChange="columns => this.columns = columns"
    >
    </FilterTable>

    <!-- 选择车型 -->
    <BaseDialog
      title="选择车型"
      :visible.sync="issearch"
      width="700px"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <carInfoDlg
        ref="carInfoDlg"
        selectType="single"
        :rowData2="formData2"
        @close="closeTypeCarDialog"
      />
    </BaseDialog>
    <!-- 编辑窗口 -->
    <Drawer
      :visible.sync="visibleDrawer"
      :title="title"
      :width="920"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <update-secne-lssue v-model="initData" :type="handleType" :rowData="formData" @close="infoClose" />
    </Drawer>
  </div>
</template>

<script>
  import { dictionary } from '@/utils/dictMixin';
  import {getCustomerService} from '@/api/customerService/secneExamine/secneLssue/index';
  import carInfoDlg from '@/pages/cms-common/model';
  import updateSecneLssue from './updateSecneLssue';
  import {getAllUser} from '@/api/customerRepair/activityVisit/resultEntry/index';

  export default {
    name: "sceneLssue",
    mixins: [dictionary],
    components: {carInfoDlg,updateSecneLssue},
    data() {
      return{
        topFilterList: this.createTopFilterList(),
        columns: this.createTableColumns(),
        fetchApi: getCustomerService,
        fetchParams: {
          state: 50081001,
          xhrAbort: true
        },
        visibleDrawer: false,
        formData2: {},
        isOpen: true,
        issearch: false,
        handleType: '',
        formData: {},
        title: '',
        initData: {},
        rowSelectData: []
      };
    },
    created() {
      // this.getDictData();
    },
    methods: {
      async getDictData() {
        // let res= await getAllUser();
        // console.info(res)
        // this.columns.find(x => x.dataIndex == 'createdBy').dictItems = res.data.map(x => ({text: x.employeeName, value: x.userId}));
      },
      createTopFilterList() {
        return[
          {
            type: 'INPUT',
            label: '车型',
            fieldName: 'model',
            placeholder: '请选择',
            readonly:true,
            unitRender: () => {
              return (
                <div>
                <el-button slot="append" icon="el-icon-search" onClick={() =>this.openDialog()}></el-button>
              <el-button slot="append" icon="el-icon-delete" onClick={() => this.clearSelectModel()}></el-button>
              </div>
            );
            }
          },
          {
            type: 'INPUT',
            label: '配件代码',
            fieldName: 'partCode'
          }
        ]
      },
      createTableColumns () {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '操作',
            dataIndex: 'column-action',
            width: 100,
            fixed: 'left',
            render: props => {
              return (
                <div>
                <el-button size="mini" disabled={!(props.row.state===50081001)} type="text" onClick={() => this.editHandle(props.row, 'edit')}>
              编辑
              </el-button>
              <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.editHandle(props.row, 'show')}>
              明细
              </el-button>
              </div>
            );
            }
          },
          {
            title: '状态',
            dataIndex: 'state',
            sorter: true,
            render: props => {
              return <span>{this.createDictText(props.row.state, '5008')}</span>;
            }
          },
          {
            title: '留车单号',
            dataIndex: 'retainNo',
            sorter: true,
          },
          {
            title: '车型',
            dataIndex: 'model',
            sorter: true,
          },
          {
            title: '配件代码',
            dataIndex: 'partCode',
            sorter: true,
          },
          {
            title: '配件名称',
            dataIndex: 'partName',
            sorter: true,
          },
          {
            title: '申请人',
            dataIndex: 'applicant',
            sorter: true,
          },
          {
            title: '申请时间',
            dataIndex: 'applyDate',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '调查范围',
            dataIndex: 'scope',
            sorter: true,
          },
          {
            title: 'VIN区间',
            dataIndex: 'vinBetween',
            sorter: true,
          },
          {
            title: '生产开始时间',
            dataIndex: 'beginDate',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '生产结束时间',
            dataIndex: 'endDate',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '排查确认说明',
            dataIndex: 'screening',
            sorter: true,
          }
        ]
      },
      selectChange(val) {
        console.log('val', val);
        if(val.length>0){
          console.info('111')
          this.isOpen=false;
          this.rowSelectData = val;
        } else {
          this.isOpen=true;
          this.rowSelectData = [];
        }
      },
      openDialog(type){
        this.issearch = true
      },
      //清空选择车型
      clearSelectModel(){
        this.topFilterList.find(item => item.fieldName === 'model').initialValue='';
      },
      detailHandle(type) {
        this.title = '新增';
        this.handleType = 'add';
        this.initData = {
          type: type, // add-edit-show
          id: 1001
        }; //行id
        this.visibleDrawer = true;
      },
      editHandle(row, type) {
        if (type === 'edit') {
          this.title = '编辑';
        }else{
          this.title = '明细';
        }
        this.formData = row;
        this.handleType = type;
        this.visibleDrawer = true;
      },
      changeHandle(val) {
        this.isOpen=true;
        this.fetchParams = Object.assign({}, val);
        this.fetchParams.state = 50081001
      },
      collapseHandle() {
        this.$nextTick(() => {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },
      closeTypeCarDialog(val){
        if(val){
          this.topFilterList.find(item => item.fieldName === 'model').initialValue= val.data[0].modelName;
        }
        this.issearch=false;
      },
      infoClose(rData) {
        this.visibleDrawer = false;
        console.info(rData)
        if (rData.type === 'refresh') {
          // 重新加载
          this.fetchParams = { ...this.fetchParams };
        }
      },
    }
  }
</script>

<style scoped>

</style>
